<template>
  <div class="table-main">
    <el-dialog
      @close="handMyClose"
      :append-to-body="true"
      :close-on-click-modal="false"
      title="商铺信息录入"
      :visible.sync="dialogVisible1"
      width="60%"
    >
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">-->
      <div class="form_box" style="margin-top: 50px;">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="店铺全称:" prop="shopName">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  v-model="form.shopName"
                  placeholder="请输入店铺全程"
                  :disabled="isShow == 3"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="银行开户名称:" prop="bankUserName">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  v-model="form.bankUserName"
                  placeholder="请输入银行开户名称"
                  :disabled="isShow == 3"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="开票说明:" prop="invoiceRemarks">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  v-model="form.invoiceRemarks"
                  placeholder="请输入开票说明"
                  :disabled="isShow == 3"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="是否可以开票:" prop="isInvoice">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-radio-group
                  v-model="form.isInvoice"
                  :disabled="isShow == 3"
                >
                  <el-radio :label="1" :disabled="isShow == 3">是</el-radio>
                  <el-radio :label="2" :disabled="isShow == 3">否</el-radio>
                </el-radio-group>
                <!-- <el-input v-model="form.isInvoice"></el-input> -->
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="工作时间:" prop="value1">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-time-picker
                  is-range
                  :disabled="isShow == 3"
                  v-model="value1"
                  range-separator="至"
                  start-placeholder="营业时间"
                  end-placeholder="结束时间"
                  @change="changeTime"
                  placeholder="选择时间范围"
                  value-format="HH:mm"
                ></el-time-picker>
                <!-- <el-time-picker
                      :disabled="isShow==3"
                      is-range
                      v-model="value4"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围"
                      
                      value-format="HH:mm"
                ></el-time-picker>-->
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="店铺图标:" prop="shopIcon">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-upload
                  :headers="headers"
                  accept=".jpg,.png,.gif.svg,.bmp,.jpeg"
                  v-if="isShow != 3"
                  class="avatar-uploader"
                  :action="$store.state.app.newUrl + '/admin/wxUser/uoloadfile'"
                  :show-file-list="false"
                  :on-success="handSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="form.shopIcon"
                    :src="form.shopIcon"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传180*180大小的图片</div> -->
                </el-upload>
                <img v-if="isShow == 3" :src="form.shopIcon" class="avatar" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="店铺背景:" prop="shopImg">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-upload
                  :headers="headers"
                  accept=".jpg,.png,.gif.svg,.bmp,.jpeg"
                  v-if="isShow != 3"
                  class="avatar-uploader"
                  :action="$store.state.app.newUrl + '/admin/wxUser/uoloadfile'"
                  :show-file-list="false"
                  :on-success="handSuccess2"
                  :before-upload="beforeAvatarUpload2"
                >
                  <img v-if="form.shopImg" :src="form.shopImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传180*180大小的图片</div> -->
                </el-upload>
                <img v-if="isShow == 3" :src="form.shopImg" class="avatar" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="店铺地址:" prop="shopAddress">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  :disabled="isShow == 3"
                  v-model="form.shopAddress"
                  placeholder="请输入店铺地址"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="店铺定位:">
            <el-row :gutter="20">
              <el-col :span="21">
                <!-- <div class="map_btn pointer" @click="handMapShow">{{siteTile}}</div> -->
                <el-button
                  :disabled="isShow == 3"
                  type="primary"
                  size="small"
                  @click="handMapShow()"
                  >{{ siteTile }}</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="经度:" prop="lng">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  v-model="form.lng"
                  disabled
                  placeholder="选择店铺定位,自动获取经纬度"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="纬度:" prop="lat">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  v-model="form.lat"
                  disabled
                  placeholder="选择店铺定位,自动获取经纬度"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="营业状态:" prop="shopAtive">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-select
                  :disabled="isShow == 3"
                  v-model="form.shopAtive"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shopStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- <el-form-item label="店铺编号:">
                <el-row :gutter="20">
                  <el-col :span="21">
                    <el-input v-model="form.shopNo" placeholder="请输入店铺编号"></el-input>
                  </el-col>
                </el-row>
          </el-form-item>-->
          <el-form-item label="店铺公告:" prop="shopNotice">
            <el-row :gutter="20">
              <el-col :span="21">
                <el-input
                  :disabled="isShow == 3"
                  v-model="form.shopNotice"
                  type="textarea"
                  placeholder="请输入店铺公告"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <!-- </el-tab-pane>
        <el-tab-pane label="附加内容" name="second">附加内容</el-tab-pane>
      </el-tabs>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          v-if="isShow != 3"
          type="primary"
          @click="handFromSub('form')"
          :loading="bntLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="选择商铺位置"
      :visible.sync="dialogVisible"
      width="50%"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <div class="dialog-footer my_btns_top">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSubMap()">确 定</el-button>
      </div>
      <div style="margin-bottom:30px">
        <el-input
          v-model="addressKeyword"
          placeholder="请输入地址来直接查找相关位置"
        ></el-input>
      </div>
      <baidu-map
        class="bmView"
        :scroll-wheel-zoom="true"
        :center="location"
        :zoom="zoom"
        @click="getLocationPoint"
        ak="YOUR_APP_KEY"
      >
        <bm-view style="width: 100%; height:300px; flex: 1"></bm-view>
        <bm-local-search
          @infohtmlset="handAddoverlay"
          :keyword="addressKeyword"
          :auto-viewport="true"
        ></bm-local-search>
      </baidu-map>
    </el-dialog>
    <el-dialog
      :append-to-body="true"
      :visible.sync="dialogVisible2"
      size="tiny"
    >
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
import { imgSizi } from "@/utils/myUtils";
export default {
  name: "SidebarLogo",
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch
  },
  watch: {
    isState(newObj) {
      this.isShow = newObj;
    }
  },
  props: {
    isState: {
      type: Number,
      default: 0
    },
    newId: {
      type: Number
    }
  },
  data() {
    return {
      value1: "",
      bntLoading: false,
      headers: {
        token: localStorage.getItem("mytoken") || ""
      },
      rules: {
        shopName: [
          { required: true, message: "请输入店铺全程", trigger: "blur" }
        ],
        bankUserName: [
          { required: true, message: "请输入银行开户名称", trigger: "blur" }
        ],
        invoiceRemarks: [
          { required: true, message: "请输入开票说明", trigger: "blur" }
        ],
        isInvoice: [
          { required: true, message: "请选择是否开票", trigger: "blur" }
        ],
        serviceStartTime: [
          { required: true, message: "请选择营业时间", trigger: "blur" }
        ],
        shopAddress: [
          { required: true, message: "请输入店铺地址", trigger: "blur" }
        ],
        lng: [
          {
            required: true,
            message: "请在店铺定位中选择经纬度",
            trigger: "blur"
          }
        ],
        lat: [
          {
            required: true,
            message: "请在店铺定位中选择经纬度",
            trigger: "blur"
          }
        ],
        shopAtive: [
          { required: true, message: "请选择营业状态", trigger: "change" }
        ],
        shopNotice: [
          { required: true, message: "请输入店铺公告", trigger: "blur" }
        ]
      },
      form: {},
      isShow: 0,
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible2: false,
      dialogVisible1: false,
      shopStatusOptions: [
        {
          label: "营业中",
          value: 1
        },
        {
          label: "休息",
          value: 2
        },
        {
          label: "冻结",
          value: 3
        }
      ],
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12.8,
      addressKeyword: "",
      activeName: "first",
      // value4: [],
      dialogVisible: false,
      siteTile: "请选择"
    };
  },
  mounted() {},
  methods: {
    handMyClose() {
      console.log("???关闭了吗");
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.value1 = "";
    },
    handGetShop(id) {
      console.log(id, "?");
      this.$api.getByIdShopt(id).then(res => {
        this.form = res.data.data;
        console.log("查询店铺详情2", res);
        this.value1 = [
          new Date(
            2020,
            9,
            10,
            this.form.serviceStartTime.slice(0, 2),
            this.form.serviceStartTime.substring(
              this.form.serviceStartTime.length - 2
            )
          ),
          new Date(
            2020,
            9,
            10,
            this.form.serviceEndTime.slice(0, 2),
            this.form.serviceEndTime.substring(
              this.form.serviceEndTime.length - 2
            )
          )
        ];
      });
      console.log("获取详情");
    },
    handFromSub(formName) {
      //1编辑
      if (this.isState == 1) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.bntLoading = true;
            this.$api
              .getShopEdit(this.form)
              .then(res => {
                if (res.data.code == 200) {
                  this.dialogVisible1 = false;
                  this.$parent.init();
                  console.log(res, "编辑", this.form);
                  this.$message({
                    message: res.data.message,
                    type: "success"
                  });
                  this.bntLoading = false;
                }
              })
              .finally(() => {
                this.bntLoading = false;
              });
          } else {
            console.log("error submit!!");
            this.$message({
              message: "请完成表单录入"
            });
            return false;
          }
        });
      } else if (this.isState == 0) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.bntLoading = true;
            this.$api
              .getShopAdd(this.form)
              .then(res => {
                console.log(res, "添加商铺", this.form);
                this.dialogVisible1 = false;
                this.bntLoading = false;
                this.$parent.init();
                this.$refs.form.resetFields();

                this.$message({
                  message: "商铺添加成功,请从新登录后生效",
                  type: "success"
                });
              })
              .finally(() => {
                this.bntLoading = false;
              });
          } else {
            console.log("error submit!!");
            this.$message({
              message: "请完成表单录入"
            });
            return false;
          }
        });
      }
    },

    handSuccess2(res, file) {
      let newUrl = JSON.parse(res.message);
      this.$set(this.form, "shopImg", newUrl.url);
    },
    beforeAvatarUpload2(file) {
      this.loading2 = true;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return isSize;
      }
      return isSize;
    },
    handSuccess(res, file) {
      let newUrl = JSON.parse(res.message);
      this.$set(this.form, "shopIcon", newUrl.url);
    },
    beforeAvatarUpload(file) {
      this.loading2 = true;
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log(file.size / 1024 / 1024);
      // const isJPG = file.type === 'image/jpeg'
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return isSize;
      }
      const isSize = imgSizi(file, 180, 180);
      return isSize;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handMapShow() {
      this.dialogVisible = true;
    },
    handleClick() {},
    changeTime(e) {
      console.log(e, "eeeeeeeee");
      this.form.serviceStartTime = e[0];
      this.form.serviceEndTime = e[1];
    },
    handAddoverlay(e) {
      // address
      this.siteTile = e.address;
      console.log(e, "eeeeeeeeeeeeeee");
      this.form.lng = e.point.lng;
      this.form.lat = e.point.lat;
    },
    getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      console.log(e, "eeeeeeeeeeeeeee");
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder();

      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.form.lng = point.lng;
        this.form.lat = point.lat;
      });
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log(res.point);
        this.form.lng = res.point.lng;
        this.form.lat = res.point.lat;
      });
    },
    handSubMap() {
      // let geoCoder = new BMap.Geocoder();
      // /* 获取位置对应的坐标 */
      // geoCoder.getPoint(this.addressKeyword, point => {
      //   // this.form.lng = point.lng;
      //   // this.form.lat = point.lat;
      //   this.$set(this.form, "lng", point.lng);
      //   this.$set(this.form, "lat", point.lat);
      //   console.log(point, "拿得到经纬度吗?");
      // });
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.my_btns_top {
  text-align: right;
  margin: 30px 0;
}
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
